<template>
    <div id="myDIV">
        <waterfall :line-gap="250" :watch="items">
            <!-- each component is wrapped by a waterfall slot -->
            <waterfall-slot
                    v-for="(item, index) in items"
                    :width="item.width"
                    :height="item.height"
                    :order="index"
                    :key="item.id"
            >
                <div class="goods-layout">
                    <div class="item">

                        <el-col :span="24">
                            <!-- <input type="checkbox" class="check-box" :id="item.id" :value="item.name" v-model="checkedNames" > -->

                            <div class="grid-content bor-radius-10 mg-bo-10 pos-relative closed"
                                 v-bind:class="{selected:classItem[index]}"
                                 @click="handler(index,classItem[index])"
                            >
                                <!-- <span class="decorate-circle"></span> -->
                                <input type="checkbox" :id="'check-' + index" class="regular-checkbox"/>
                                <label :for="'check-' + index"></label>

                                <div class="card-01">
                                    <el-row :gutter="20">

                                        <el-col :span="8">
                                            <div class="grid-content pd">
                                                <img src="../../../static/img/goods.png">
                                            </div>
                                        </el-col>

                                        <el-col :span="16">
                                            <div class="grid-content text">
                                                <h6>{{ item.name }}</h6>
                                                <p class="l2">{{ item.remark || '自然清新不油腻，清爽过夏' }}</p>
                                                <span>原价：{{ item.price }}</span>
                                            </div>
                                        </el-col>
                                    </el-row>

                                </div>
                                <div class="vip-price">
                                    <small>会员价：</small>
                                    <span>{{ item.memberPrize }}</span>
                                </div>


                                <!-- <span>Checked names: {{ checkedNames }}</span> -->

                            </div>
                        </el-col>
                    </div>
                </div>
            </waterfall-slot>
        </waterfall>
    </div>
</template>

<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import cfg from '../../properties';
    import axios from '../../util/http';
    import qs from 'qs';
    export default {
        name: "like",
        data: function () {
            return {
                allItems: [
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券1",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券1",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券1",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券2",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券2",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券2",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券3",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券3",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券4",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券4",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券5",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券5",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券6",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券6",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券7",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券7",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券8",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    },
                    {
                        "code": "djq",
                        "id": "3224b5f9-d073-40a9-8fbe-276b408c794e",
                        "kindCode": 0,
                        "memberPrize": 0,
                        "name": "代金券99",
                        "organId": "c5fe00d4-03ff-45b0-8aa3-bb9c4558427c",
                        "organName": "root",
                        "pictureId": "91bb8219-18cb-42e1-a2fb-656ea679b5e2",
                        "pictureName": "d53893ed-028a-4f89-abb4-ae75254f04d7.jpg",
                        "price": 1,
                        "prize": 0,
                        "rate": 99999,
                        "remark": "",
                        "score": 0,
                        "spell": "djq",
                        "state": 1,
                        "tagIds": "",
                        "tagNames": "",
                        "unit": "元",
                        "ver": 2
                    }
                ],
                items: [],
                classItem: [],
                checkedNames: [],
                n: 6,//显示数量
                page: 1//当前页数
            }
        },
        mounted: function () {
            let self = this;
            this.loadMore();
//            document.getElementById("myDIV").addEventListener('wheel', this.loadMore);
            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                console.log(e.wheelDelta);
                if (e.wheelDelta > 0) {
                    console.log('上滚');
                    self.page--;
                }
                if (e.wheelDelta < 0) {
                    console.log('下滚');
                    self.page++;
                }
                self.loadMore();
            });
        },
        created: function () {
            let baseUrl = cfg.api_url + "/goods/";

            let self = this;

            axios.get(baseUrl)
                .then(function (res) {
                    console.log(JSON.stringify(res.data));

//                    self.items = res.data.records;
//                    self.items = self.allItems;
//                    console.log(self.items)
//                    for (var i = 0; i < self.items.length; i++) {
//                        self.items[i].height = 50;
//                        self.items[i].width = 50;
//                        console.log(self.items[i]);
//
//                    }
                });
        },
        methods: {
            loadMore: function () {
                console.log(this.page);
                if (this.page > this.allItems.length / this.n) {
//                    console.log(232323);
                    this.page = 1;
                }
                if (this.page <= 0) {
                    this.page = 1;
                }
                this.items = this.allItems.slice(this.page * this.n - this.n, this.page * this.n);
//                console.log(this.allItems.length/this.n);

                for (var i = 0; i < this.items.length; i++) {
                    this.items[i].height = 50;
                    this.items[i].width = 50;
//                    console.log(this.items[i]);

                }
            },
            handler: function (index, isSelected) {
                console.log(index);
                console.log(isSelected);
                if (isSelected == true) {
                    this.$set(this.classItem, index, false);
                } else {
                    this.$set(this.classItem, index, true);
                }

                console.log(this.classItem);
            }
        },
        components: {
            Waterfall,
            WaterfallSlot
        }
    }

</script>
<style scoped>
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }

    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
</style>